<template>
	<view class="u-wrap">
		<view class="status"></view>
		<view class="nav">
			<view class="left" @click="toBack()">
				<image src="../../static/image/back.png" />
			</view>
			<view class="center">员工排班表</view>
			<view class="right">
				<image src="../../static/image/7a6c14529f55e7906092a378d697bd4.png" />
			</view>
		</view>
		<view class="arrange_list">
			<view class="arrange_list_imaeg" v-if="StaffSchedulingData.length==0">
				<image src="../../static/image/empty.png" />
				<view class="wenzi" >暂时没有数据哦</view>
			</view>
			<view class="item" v-for="(item,index) in StaffSchedulingData" :key="index">
				<view class="shift_name">
					<view class="left">
						班次名称: <text class="word">{{item.bcid.name}}</text>
					</view>
					<view class="right">
						上班日期: <text class="word">{{item.sbriq}}</text>
					</view>
					
				</view>
				<view class="time">
					<view class="left">
						<view class="top">
							开始时间: {{item.bcid.kssj}}
						</view>
						<view class="button">
							结束时间: {{item.bcid.jssj}}
						</view>
					</view>
					<view class="right">
						<view class="top">
							姓名: {{name}}
						</view>
						<view class="button">
							考勤状态: {{item.kqzt}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mendian_id: '',
				dqjs: '',
				user_id: '',
				StaffSchedulingData: [],
				name: ''

			}
		},
		onLoad() {
			var that = this;
			uni.getStorage({
				key: 'user_key',
				complete: function(res) {
					// console.log(666, res)
					that.mendian_id = res.data.mendian
					that.dqjs = res.data.role
					that.user_id = res.data.id
					that.name = res.data.name
					that.getStaffScheduling(res.data.id)
				}
			})
		},
		onShow() {
			this.getStaffScheduling(this.user_id)
		},
		methods: {
			//获取员工排班结果
			getStaffScheduling(user_id) {
				let _that = this;
				uni.request({
					url: getApp().globalData.url + '/client/GetBaiblist?id=' + user_id,
					method: 'GET',
					data: {},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						// console.log(888, res)
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							_that.StaffSchedulingData = res.data.data
						} else if (res.data.code == 400) {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "查询排班数据为空"
							});
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求异常"
							});
						}
					}
				})
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			}

		}
	}
</script>

<style>
	page {
		background: #F0F0F0;
		height: auto;
		min-height: 100%;
	}
</style>
<style scoped lang="scss">

	.u-wrap {
		text-align: center;
		align-items: center;

		.status {
			height: var(--status-bar-height);
			background-color: #1BB68E;

		}

		.nav {
			display: flex;
			justify-content: space-between;
			height: 73rpx;
			background-color: #1BB68E;

			.left {
				width: 33%;
				height: 73rpx;
				text-align: left;
				align-items: center;

				image {
					width: 20rpx;
					height: 33rpx;
					margin-left: 29rpx;
					margin-top: 20rpx;

				}
			}

			.center {
				width: 33%;
				align-items: center;
				height: 73rpx;
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 73rpx;

			}

			.right {
				width: 33%;
				height: 73rpx;
				text-align: right;
				margin-right: 30rpx;

				image {
					width: 12rpx;
					height: 34rpx;
					margin-top: 30rpx;
				}
			}
		}

		.arrange_list {
			padding-top: 20rpx;
			padding-bottom: 80rpx;
			text-align: center;

			.arrange_list_imaeg {
				height: 300rpx;
				text-align: center;
				margin-top: 200rpx;

				image {
					height: 300rpx;
					width: 350rpx;
				}
				.wenzi{
					height: 30rpx;
					text-align: center;
					font-size: 26rpx;
					color: #000;
				}
			}


			.item {
				height: 250rpx;
				margin: auto 31rpx 20rpx 31rpx;
				border-radius: 20rpx;
				background-color: #fff;
				border: 1rpx solid #D3D3D3;

				.shift_name {
					height: 80rpx;
					display: flex;
					justify-content: space-between;
					.left{
						height: 80rpx;
						width: 50%;
						align-items: center;
						text-align: left;
						margin-left: 30rpx;
						line-height: 80rpx;
						.word {
							margin-left: 20rpx;
						}
					}
					.right{
						width: 50%;
						height: 80rpx;
						align-items: center;
						margin-left: 30rpx;
						line-height: 80rpx;
						font-size: 26rpx;
						font-weight: bold;
						margin-right: 30rpx;
						text-align: right;
						.word {
							margin-left: 20rpx;
						}
					}
				
					
				}

				.time {
					height: 170rpx;
					display: flex;

					.left {
						height: 170rpx;
						width: 65%;
						text-align: left;
						margin-left: 30rpx;

						.top {
							height: 85rpx;
							line-height: 85rpx;
							font-size: 24rpx;
							color: #FF007F;
						}

						.button {
							height: 85rpx;
							line-height: 85rpx;
							font-size: 24rpx;
							color: #FF007F;
						}
					}

					.right {
						height: 170rpx;
						width: 35%;
						text-align: left;
						margin-left: 30rpx;

						.top {
							height: 85rpx;
							line-height: 85rpx;
							font-size: 26rpx;
							font-weight: bold;
						}

						.button {
							height: 85rpx;
							line-height: 85rpx;
							font-size: 26rpx;
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>
